<template>
  <div class="tag-page">
    <el-form ref="form" @submit.native.prevent label-width="100px" class="top-search-box">
      <el-row class="row">
        <el-col :span="8">
            <el-form-item label="标签名称">
                <el-input v-model="searchParams.name" placeholder="请输入" clearable></el-input>
            </el-form-item>
        </el-col>
        <el-col :span="16">
            <el-button v-if="$route.query.key" size="large" type="primary" @click="showTagDialog" class="default-button f-right">新增</el-button>
            <el-button size="large" type="warning" @click="resetFn" class="default-button f-right m-r-m">重置</el-button>
            <el-button v-if="$route.query.key" size="large" type="primary" @click="getInfo" class="default-button f-right m-r-m">查询</el-button>
        </el-col>
      </el-row>
    </el-form>

    <div class="split-box">
        <el-table :data="tableData" style="width: 100%" class="noPaddingHead">
            <el-table-column label="标签名称" align="left" prop="name"></el-table-column>
            <el-table-column label="标签code" align="left" prop="code"></el-table-column>
            <el-table-column label="创建时间" align="left">
              <template slot-scope="scope">
                  {{scope.row.createTime | date-format('YYYY-MM-DD HH:mm')}}
              </template>
            </el-table-column>
            <el-table-column label="操作" align="left">
                <template slot-scope="scope">
                    <el-button type="text" @click="editItem(scope.row)" class="default-button">编辑</el-button>
                    <el-button type="text" @click="deleteItem(scope.row)" class="default-button danger">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <Pagination @change="pageChange" :total="total" />
    </div>

    <el-dialog title="标签管理" :visible.sync="tagDialog" width="45%" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
      <el-form ref="dialogForm" :model="tagModel" label-width="110px" size="small" label-position="right">
        <el-row>
          <el-col :span="24">
              <el-form-item label="标签名称" prop="name" :rules="[{ required: true, message: '请输入标签名称', trigger: 'blur' }]">
                  <el-input v-model="tagModel.name" placeholder="请输入" clearable></el-input>
              </el-form-item>
          </el-col>
          <el-col :span="24">
              <el-form-item label="标签code" prop="code" :rules="[{ required: true, message: '请输入标签code', trigger: 'blur' }]">
                  <el-input v-model="tagModel.code" placeholder="请输入" clearable></el-input>
              </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="cancleDialog">取 消</el-button>
        <el-button size="small" type="primary" @click="addTag">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
import * as Port from "../../../api";
import { formValid } from '@/lib/utils'
import { apiTagAdd,apiTagEdit,apiTagDel,apiTagList } from "../../../api";
import { requestTips,askDialog } from "../../../assets/util"

export default {
  data() {
    return {
      searchParams: {
        name: ''
      },
      organizeList:[],
      total: 0,
      pageSize: 10,
      currentPage: 1,
      tableData:[],
      tagDialog:false,
      tagModel:{
        name: "",
        code: ""
      }
    };
  },
  created() {
    // 获取默认的企业key
    if (!this.$route.query.key && localStorage.getItem('userEnterpriseid') && this.$route.query.isAdd != 1) {
      this.$route.query.key = localStorage.getItem('userEnterpriseid')
    }
  },

  mounted() {
    if (this.$route.query.key) {
      this.getInfo()
    }
  },

  methods: {
    //table数据源
    async getInfo(type) {
        let res = await Port.apiTagList({
            enterpriseid:this.$route.query.key,
            pageSize:this.pageSize,
            currentPage:type ? this.currentPage : 1,
            name:this.searchParams.name || null,
            type: 'user_tag'
        })
        this.tableData = res.rows || []
        this.total = res.total || 0
    },
    //确认添加
    addTag(){
      formValid(this, 'dialogForm', this.saveFn)
    },
    async saveFn(){
      let param = {
        ...this.tagModel,
        flag:false,
        enterpriseid:this.$route.query.key
      }

      param.type = 'user_tag'

      let res = this.tagModel.primaryKey ? await Port.apiTagEdit(param) : await Port.apiTagAdd(param)
      requestTips(res,()=>{
        this.tagDialog = false
        this.getInfo()
      })
    },
    //删除
    deleteItem(row){
      askDialog("确认删除？",async () => {
          const res = await Port.apiTagDel(row.primaryKey)
          requestTips(res,()=>{
            this.getInfo()
          })
      })
    },
    //编辑
    async editItem(row){
      this.tagModel = JSON.parse(JSON.stringify(row))
      this.tagDialog = true
    },
    //关闭弹框
    cancleDialog(){
      this.tagModel.name = ''
      this.tagModel.code = ''
      this.tagDialog = false
    },
    //分页
    pageChange(e) {
      this.currentPage = e.currentPage;
      this.pageSize = e.pageSize;
      this.getInfo('more');
    },
    //重置
    resetFn(){
        this.searchParams.name = ''
        this.currentPage = 1
        this.pageSize = 10
        this.getInfo();
    },
    showTagDialog () {
      this.tagModel.name = ""
      this.tagModel.code = ""
      this.tagDialog = true
      this.$nextTick(()=>{
        this.$refs.dialogForm.clearValidate();
      })
    }
  },
};
</script>
<style lang="scss" scoped>
.tag-page{
    .top-search-box{
        padding: 16px;
    }
    .split-box{
        padding: 0 25px;
    }
}
</style>